// 库引入
import React, {Component} from 'react';
import {inject, observer} from 'mobx-react';
import classNames from 'classnames';
import {Link} from 'react-router-dom';

// 样式引入
import styles from './style.module.less';

@observer
class PopularLibraries extends Component {
  render() {
    return (
      <div
        className={classNames(styles.popularLibraries, this.props.className)}
        style={this.props.style}>
        <div className="container">
          <nav className={styles.nav}>
            {this
              .props
              .data
              .map(item => (
                <Link className={styles.navItem} key={item.text} to={item.linkTo}><img className={styles.navImg} src={item.imgUrl} alt={item.text}/></Link>
              ))}
          </nav>
        </div>
      </div>
    );
  }
}

PopularLibraries.defaultProps = {
  data: [
    {
      imgUrl: `${process.env.PUBLIC_URL}/img/bootstrap.svg`,
      linkTo: '/library-details/bootstrap',
      text: 'bootstrap'
    }, {
      imgUrl: `${process.env.PUBLIC_URL}/img/react.svg`,
      linkTo: '/library-details/react',
      text: 'react'
    }, {
      imgUrl: `${process.env.PUBLIC_URL}/img/jquery.svg`,
      linkTo: '/library-details/jquery',
      text: 'jquery'
    }, {
      imgUrl: `${process.env.PUBLIC_URL}/img/angular-icon.svg`,
      linkTo: '/library-details/angular',
      text: 'angular'
    }, {
      imgUrl: `${process.env.PUBLIC_URL}/img/vue.svg`,
      linkTo: '/library-details/vue',
      text: 'vue'
    }, {
      imgUrl: `${process.env.PUBLIC_URL}/img/backbone-icon.svg`,
      linkTo: '/library-details/backbone',
      text: 'backbone'
    }, {
      imgUrl: `${process.env.PUBLIC_URL}/img/lodash.svg`,
      linkTo: '/library-details/lodash.js',
      text: 'lodash'
    }, {
      imgUrl: `${process.env.PUBLIC_URL}/img/momentjs.svg`,
      linkTo: '/library-details/moment.js',
      text: 'moment'
    }
  ]
};

const InjectPopularLibraries = inject(({
  someStore = {}
}) => ({someProps: someStore.attribute}))(PopularLibraries);

export {PopularLibraries, InjectPopularLibraries};